<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 26826
  Date: 2022/5/16
  Time: 10:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/pintuer.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/admin.css">
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/pintuer.js"></script>
</head>
<body>
<div class="panel admin-panel margin-top">
    <iframe width='100%' height='100%' style="display: none" src='${pageContext.request.contextPath}/jumpInsertCard.action'
            id='card_list' name='card_list'></iframe>
    <iframe width='100%' height='100%' style="display: none" src='${pageContext.request.contextPath}/jumpInsertCompany.action'
            id='company_list' name='company_list'></iframe>
    <div class="panel-head" id="add"><strong><span class="icon-plus-square-o"></span>添加雇员</strong></div>
    <div class="body-content">
        <form method="post" class="form-x">
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>请输入姓名</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" id="employee_name" name="employee_name"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>请输入年龄</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" id="employee_age" name="employee_age"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>请选择性别</label>
                </div>
                <div class="field" style="margin-top: 10px">
                    <input type="radio" class="sex" id="sexM" name="employee_sex" value="男"  />男
                    <input type="radio" class="sex" id="sexW" name="employee_sex" value="女" />女
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>请选择公司</label>
                </div>
                <div class="field">
                    <select id="companyNameSelect" style=" background-color: whitesmoke; padding:10px 15px; border:1px solid #ddd; border-radius:5px ">
                        <option class="company_id" id="company_id" name="company_person" value="请选择">请选择</option>
                        <c:forEach items="${companies}" var="comp">
                            <option id="company_id" class="company_id" name="company_person" value="${comp.company_id}">${comp.company_name}</option>
                        </c:forEach>
                    </select>
                    <button type="button" onclick="company()">添加一个公司</button>
                </div>
            </div>
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>请设置用户名</label>
                </div>
                <div class="field">
                    <input type="text" class="input w50" id="employee_username" name="employee_username"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>请设置密码</label>
                </div>
                <div class="field">
                    <input type="password" class="input w50" id="employee_password" name="employee_password"/>
                    <div class="tips"></div>
                </div>
            </div>
            <div class="form-group">
                <div class="label" style="width: 100px">
                    <label>添加身份证</label>
                </div>
                <div class="field">
                    <textarea id="card_person" name="card_person" style="width: 500px " readonly="true"></textarea>
                    <div class="tips"></div>
                    <button type="button" style="margin-top: 10px; margin-left: 10px" onclick="card()">添加身份证</button>
                </div>
            </div>
            <div class="form-group">
                <div class="label">
                    <label></label>
                </div>
                <div class="field">
                    <button class="button bg-main icon-check-square-o" type="button" onclick="insertEmployee()">添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    let name = "";
    let address = "";
    let sex = "保密";
    $("#companyNameSelect").focusin(function (){
        name = $("[name='company_person']").attr("addCompany_name");
        address = $("[name='company_person']").attr("company_address");
        console.log(name)

        if( name == undefined){
            console.log("==================")
        }else (
            $("#companyNameSelect").html("<option > "+ name +" </option>")
        )
    });

    function company(){
        $('#company_list').css("display", "").css("position", "absolute").css("z-index", "999");
    }

    function card(){
        $('#card_list').css("display", "").css("position", "absolute").css("z-index", "999");
    }

    function insertEmployee(){

        console.log($("#sexM").is(":checked"))
        if ($("#sexM").is(":checked")){
            sex = "男";
        }
        if ($("#sexW").is(":checked")){
            sex = "女";
        }
        console.log("===========================")
        const url = "${pageContext.request.contextPath}/insertEmployee.action";
        let data = {
            employee_name: $("#employee_name").val(),
            employee_age: $("#employee_age").val(),
            employee_sex: sex,
            employee_username: $("#employee_username").val(),
            employee_password: $("#employee_password").val(),
            company_id: $("#companyNameSelect  option:selected").val(),
            card_num: $("#card_person").val(),
            card_stat: $("[name='card_person']").attr("idcard_starttime"),
            card_end: $("[name='card_person']").attr("idcard_endtime"),
            addCompany_name: name,
            company_address: address
        }
        console.log(data)

        $.post(url, data, function (data){
            alert((data));
        })
    }
</script>
</body>
</html>
